<template>
    <div>
        <div class="menuDescriptionBox">
            <i class="fa fa-question-circle-o fa-lg"></i> <span class="menuDescTitle">模板超市说明：</span>
            <div class="menuDesc">在模板预览中，只有pc端与h5端可以直接进行预览，也只有这两种方式可以进行云部署并直接使用，其他客户端无法进行在线预览，会使用图片的方式进行展示，让您进行相关的了解，如需使用，您可以在应用列表的配套模板中添加相应模板，进行端的下载</div>
        </div>  
        <div class="templateSupermarketMainMenu">
            <div class="templateSupermarketMainMenuItem" :class="{selected : nowProductId == '1'}" @click="appProductClick(1)">内容管理系统</div>
            <div class="templateSupermarketMainMenuItem" :class="{selected : nowProductId == '2'}" @click="appProductClick(2)">商城管理系统</div>
        </div>
        <div class="templateSupermarketMenu">
            <div v-for="item in templateTypeData" :class="{selected : nowTmeplateType == item.type}" class="templateSupermarketMenuItem" @click="templateTypeClick(item.type)">
                {{item.text}}
            </div>
        </div>
        <div class="templateSupermarketPcBox"  v-if="parseInt(nowTmeplateType) > 0">
             <div class="templateSupermarketAppItem" v-if="parseInt(item.cts_type) > 0" v-for="item in templateData">
                 <div class="templateSupermarketAppItem_img">
                    <!-- <img src="~BUSSINESS_IMAGE/images/morentu.jpeg" /> -->
                    <img :src="item.cts_template_image" />
                    <div class="viewTemplateId">{{item.cts_template_id}}</div>
                    <div class="templateSupermarketAppItem_new">
                        <img src="~BUSSINESS_IMAGE/images/new.png" />
                    </div>
                    <div class="templateSupermarketAppItem_free">
                        <img src="~BUSSINESS_IMAGE/images/free.png" />
                    </div>
                </div> 
                <div class="templateSupermarketAppItem_info">
                    <div class="templateSupermarketAppItem_infoItem">
                        <i class="fa fa-download"></i>下载：{{item.cts_download_count}}次
                    </div>
                    <div class="templateSupermarketAppItem_infoItem">
                        <i class="fa fa-eye"></i>浏览：{{item.cts_brows_count}}次
                    </div>
                    <div class="templateSupermarketAppItem_rateItem">
                       <div class="templateSupermarketAppItem_rateTitle">
                           <i class="fa fa-shield"></i>推荐星级：
                       </div>
                       <div class="templateSupermarketAppItem_rateBox">
                           <el-rate :value=5 :max="5"></el-rate>
                       </div>
                    </div>
                    <div class="templateSupermarketAppItem_link">
                        <div class="templateSupermarketAppItem_btn" @click="showTemplateDemo(item.cts_template_id,item.cts_type)" v-if="item.cts_type == '1'">查看演示</div>
                        <div class="templateSupermarketAppItem_btn" @click="showTemplateDemo(item.cts_template_id,item.cts_type,item.cts_images)" v-if="item.cts_type > 1">图片演示</div>
                        <div class="templateSupermarketAppItem_btn noTemplate" v-if="item.cts_is_template_demo == '0'">暂无演示</div>
                    </div>
                </div>
             </div>
        </div>
        <div class="templateSupermarketPcBox" v-if="nowTmeplateType == '0'">
            <div class="templateSupermarketPcItem"  v-if="item.cts_type == '0'" v-for="item in templateData">
                <div class="templateSupermarketPcItem_img">
                    <!-- <img src="~BUSSINESS_IMAGE/images/morentu.jpeg" /> -->
                    <img :src="item.cts_template_image" />
                </div> 
                <div class="templateSupermarketPcItem_info">
                    <div class="viewTemplateId">{{item.cts_template_id}}</div>
                    <div class="templateSupermarketPcItem_new" v-if="item.cts_is_free == 1">
                        <img src="~BUSSINESS_IMAGE/images/new.png" />
                    </div>
                    <div class="templateSupermarketPcItem_free" v-if="item.cts_is_new == 1">
                        <img src="~BUSSINESS_IMAGE/images/free.png" />
                    </div>
                    <div class="templateSupermarketPcItem_infoItem">
                        <i class="fa fa-download"></i>下载：{{item.cts_download_count}}次
                    </div>
                    <div class="templateSupermarketPcItem_infoItem">
                        <i class="fa fa-eye"></i>浏览：{{item.cts_brows_count}}次
                    </div>
                    <div class="templateSupermarketPcItem_rateItem">
                       <div class="templateSupermarketPcItem_rateTitle">
                           <i class="fa fa-shield"></i>推荐星级：
                       </div>
                       <div class="templateSupermarketPcItem_rateBox">
                           <el-rate :value="parseInt(item.cts_star)" :max="5"></el-rate>
                       </div>
                    </div>
                </div>
                <div class="templateSupermarketPcItem_link">
                    <div class="templateSupermarketPcItem_btn" v-if="item.cts_is_template_demo == '1'" @click="showTemplateDemo(item.cts_template_id,item.cts_type)">查看演示</div>
                    <div class="templateSupermarketPcItem_btn noTemplate" v-if="item.cts_is_template_demo == '0'">暂无演示</div>
                </div>
            </div>
        </div>
        <div class="imagePreviewBox" v-if="isImagePreview">
            <div class="imagePreviewMain">
                <viewer :images="imagePreviewData">
                    <img v-for="item in imagePreviewData" :src="item" height="200">
                </viewer>
                <div class="closeImagePreviewBox" @click="closeImagePreviewBoxClick">
                    <i class="fa fa-close"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                imagePreviewData : [],
                isImagePreview   : false,
                nowProductId     : 1, //产品id,默认为内容管理系统
                nowTmeplateType  : 0, //产品类型
                templateTypeData : [
                    {
                        type : "0",
                        text : "PC端"
                    },
                    {
                        type : "1",
                        text : "H5端"
                    },
                    {
                        type : "2",
                        text : "公众号端"
                    },
                    {
                        type : "3",
                        text : "小程序端"
                    },
                    {
                        type : "4",
                        text : "Ios端"
                    },
                    {
                        type : "5",
                        text : "Android端"
                    },
                    {
                        type : "6",
                        text : "Fluuter端"
                    }
                ]
            }
        },
        //初始化函数
        mounted() {
            this.initData()
        },
        //计算属性
        computed: {
            ...mapState({
                templateData : state => state.TemplateSupermarketModule.templateData
            })
        },
        //组件方法
        methods: {
            templateTypeClick(templateType){
                this.nowTmeplateType = templateType;
                this.initData();
            },
            appProductClick(productId){
                this.nowProductId = productId;
                this.initData();
            },
            initData(){
                this.$myLoading.startLoading()
                this.$http.getHttp(
                    this.$API.easydCloudTemplateSupermarketSearch + "/cts_is_delete/0/cts_capid/"+this.nowProductId+"/cts_type/" + this.nowTmeplateType + "/skip/0/limit/999",
                    rs => {
                        this.$myLoading.endLoading()
                        this.$store.commit('TemplateSupermarketModule/updateTemplateData',rs.data)
                    }
                )
            },
            showTemplateDemo(templateId,cts_type,cts_images){

                if(cts_type == '0'){
                    var templateDemoUrl = this.$global.cloudServer + "/template/pc/"+templateId
                    window.open(templateDemoUrl)
                }else if(cts_type == '1'){
                    var templateDemoUrl = this.$global.cloudServer + "/template/h5/"+templateId
                    window.open(templateDemoUrl,'','width=375,height=667')
                }else{

                    //获取图片数组展示数据
                    this.imagePreviewData = cts_images.split("|");
                    this.isImagePreview = true;

                    $('.main_content').scrollTop(0);
                    $('.main_content').css('overflow','hidden');
                }

            },
            closeImagePreviewBoxClick(){
                this.isImagePreview = false;
                $('.main_content').css('overflow','auto');
            }   
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.templateSupermarketMainMenu {
    width 100%
    height 50px
    text-align center

    .templateSupermarketMainMenuItem {
        width 100px
        height 30px
        margin 10px
        line-height 30px
        cursor pointer
        border-radius 5px
        float left
    }

    .templateSupermarketMainMenuItem.selected {
        background orange
        color #fff
    }
}

.templateSupermarketHint {
    width:100%;
    height:30px;
    font-size:12px;
    color:red;

}

.templateSupermarketMenu {
    width 100%
    height 50px
    line-height 50px
    text-align center
    border-bottom 1px solid #eee

    .templateSupermarketMenuItem {
        width 100px
        height 50px
        float left
        cursor pointer
    }

    .selected {
        color orange
        font-weight bold
    }
}
.templateSupermarketPcBox {
    width 100%
    height auto
    display flex
    flex-wrap wrap
    justify-content space-between
    padding-top 15px

    .templateSupermarketAppItem {
        width 24%
        height 450px
        border-radius 5px
        background #FEFEFE
        border 1px solid #eee  
        box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
        position relative  
        margin-bottom 15px
        overflow hidden

        
        .templateSupermarketAppItem_new {
            width 50px
            height 42px
            position absolute
            right 60px
            top -2px
            z-index 99    

            img {
                width 100%
                height auto
            }
        }

        .templateSupermarketAppItem_free {
            width 50px
            height 42px
            position absolute
            right 10px
            top -2px
            z-index 99    

            img {
                width 100%
                height auto
            }
        }

        .viewTemplateId {
                width 120px
                height 40px
                color #fff
                font-size 20px
                line-height 40px
                font-weight bold
                background-color rgba(0,0,0,0.5)
                box-shadow 0 2px 12px 0 rgba(255,255,255,.4)
                position absolute
                left 10px
                top 10px
                text-align center
                border-radius 5px

            }

        .templateSupermarketAppItem_info {
            width 100%
            height 90px
            padding-left 20px
            padding-right 15px
            padding-top 10px
            position relative
            padding-bottom 10px
            box-sizing border-box

            .templateSupermarketAppItem_link {
                .templateSupermarketAppItem_btn {
                    width 120px
                    height 40px
                    border-radius 5px
                    right 10px
                    position absolute
                    btnStyle(40px)

                    &:last-child {
                        border-top 1px solid #f5f5f5    
                    }
                }

                .templateSupermarketAppItem_btn.noTemplate {
                    background #ccc
                }

                
            }


            i {
                margin-right 5px
                font-size 12px
                color #999
            }

            .templateSupermarketAppItem_infoItem {
                width 100%
                float left
                color #999
                margin-bottom 10px
            }

            .templateSupermarketAppItem_rateItem {
                width 100%
                float left
                margin-bottom 10px
                color #999

                .templateSupermarketAppItem_rateTitle {
                    width 80px
                    float left    
                }

                .templateSupermarketAppItem_rateBox {
                    width auto
                    float left
                    position relative
                    top -1px   
                }
            }
        }

        .templateSupermarketAppItem_img {
            width 100%
            height 360px

            img {
                width 100%
                height 100%
                object-fit cover
            }
        }
    }

    .templateSupermarketPcItem {
        width 32.5%
        height 300px
        border-radius 5px
        background #FEFEFE
        border 1px solid #eee  
        box-shadow 0 2px 12px 0 rgba(0,0,0,.1)
        position relative  
        margin-bottom 15px
        overflow hidden

        .templateSupermarketPcItem_new {
            width 50px
            height 42px
            position absolute
            right 60px
            top -2px
            z-index 99    

            img {
                width 100%
                height auto
            }
        }

        .templateSupermarketPcItem_free {
            width 50px
            height 42px
            position absolute
            right 10px
            top -2px
            z-index 99    

            img {
                width 100%
                height auto
            }
        }

        .templateSupermarketPcItem_img {
            width 100%
            height 240px

            img {
                width 100%
                height 100%
                object-fit cover
            }
        }

        .templateSupermarketPcItem_info {
            width 240px
            height 60px
            padding-left 20px
            padding-right 15px
            padding-top 10px
            padding-bottom 10px
            box-sizing border-box

            i {
                margin-right 5px
                font-size 12px
                color #999
            }

            .viewTemplateId {
                width 120px
                height 40px
                color #fff
                font-size 20px
                line-height 40px
                font-weight bold
                background-color rgba(0,0,0,0.5)
                box-shadow 0 2px 12px 0 rgba(255,255,255,.4)
                position absolute
                left 10px
                top 10px
                text-align center
                border-radius 5px

            }

            .templateSupermarketPcItem_infoItem {
                width 50%
                float left
                color #999
                margin-bottom 10px
            }

            .templateSupermarketPcItem_rateItem {
                width 100%
                float left
                margin-bottom 10px
                color #999

                .templateSupermarketPcItem_rateTitle {
                    width 80px
                    float left    
                }

                .templateSupermarketPcItem_rateBox {
                    width auto
                    float left
                    position relative
                    top -1px   
                }
            }
        }

        .templateSupermarketPcItem_link {
            position absolute
            left 240px
            right 0px
            top 240px
            bottom 0px
            background #eee

            .templateSupermarketPcItem_btn {
                width 100%
                height 60px
                btnStyle(60px)
                

                &:last-child {
                    border-top 1px solid #f5f5f5    
                }
            }

            .templateSupermarketPcItem_btn.noTemplate {
                background #ccc
            }

            
        }
    }
}
</style>